<!-- components/ui/FeatureCard.vue -->
<template>
  <div 
    class="rounded-xl shadow-md overflow-hidden transition-all duration-300 card-hover"
    :class="[colorClass, hoverEffect]"
  >
    <div class="h-48 flex items-center justify-center">
      <!-- 本地图标容器 -->
      <div class="icon-container p-4 rounded-full bg-white bg-opacity-20">
        <img 
          :src="iconPath" 
          :alt="title + '图标'"
          class="h-16 w-16 object-contain"
        />
      </div>
    </div>
    <div class="bg-white p-6">
      <h3 class="text-xl font-semibold mb-2">{{ title }}</h3>
      <p class="text-gray-600 leading-relaxed">{{ description }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  // 本地图标路径（推荐使用绝对路径）
  iconPath: {
    type: String,
    required: true,
    validator: (value: string) => {
      return value.startsWith('/') || value.startsWith('@/assets')
    }
  },
  title: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'blue',
    validator: (value: string) => ['blue', 'green', 'purple'].includes(value)
  },
  description: {
    type: String,
    required: true
  }
})

// 动态颜色类
const colorClass = computed(() => {
  return `bg-${props.color}-500`
})

// 悬停效果
const hoverEffect = computed(() => {
  return `hover:bg-${props.color}-600`
})
</script>

<style scoped>
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.icon-container {
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.1);
}
</style>